<template>
  <div>
    <div id="indexHead">
      <el-row>
        <el-col :span="4">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>总车辆</span>
            </div>
            <div>
              <span v-text="data.vehicle_sum">  </span> 辆
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>在线车辆</span>
            </div>
            <div>
              <span v-text="data.vehicle_online_sum">  </span> 辆
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>总里程</span>
            </div>
            <div>
              <span v-text="data.total_mileage">  </span> KM
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>当月里程</span>
            </div>
            <div>
              <span v-text="data.monthly_mileage">  </span> KM
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>本周里程</span>
            </div>
            <div>
              <span v-text="data.weekly_mileage">  </span> KM
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>本日里程</span>
            </div>
            <div>
              <span v-text="data.daily_mileage">  </span> KM <el-button style="height: 25px; padding: 5px 10px" @click="init()">开始</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div id="container"></div>
  </div>
</template>

<script>
var mapGaoDe = null , markers = [];
import {getVehicleIndexData} from "./api"
export default {
  data:function() {
    return {
      map: true,
      timer : null,
      data:{
        vehicle_sum : 1,
        vehicle_online_sum : 1,
        total_mileage : 1,
        monthly_mileage : 1,
        weekly_mileage : 1,
        daily_mileage : 1,
        vehicle_datas: []
      }
    };
  },
  beforeDestroy() {
	  console.log('beforeDestroy', '销毁前');
	  this.close();
  },
  created:function() {
    // 加载高德地图库
    var webapi = document.createElement("script");
    webapi.src = `https://webapi.amap.com/maps?v=2.0&key=2133ec955e1135c305be7c1c729497ba&plugin=AMap.PolygonEditor&callback=onLoad`;
    // 将api文件引入到页面中，加载完毕以后就会回调函数 onLoad
    document.head.appendChild(webapi);
    var jsapi_demos = document.createElement("script");
    jsapi_demos.src = `https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js`;
    document.head.appendChild(jsapi_demos);

  },
  mounted() {
    // 页面挂载完毕，开始异步引入高德地图
    // 创建了一个回调函数，高德地图加载完毕后会调用
    window.onLoad = function() {
      //所有关于地图的逻辑全部都在这个回调里面，
      // 保证高德地图加载完毕
      mapGaoDe = new AMap.Map("container", {
        center: [116.400274, 39.905812],
        zoom: 13,
        viewMode: '3D',
      });
    }
    mapGaoDe.setFitView()

  },
  methods: {
    refreshMarkers(){
      this.removeMarkers();
      markers = [];
      // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
      
      this.data.vehicle_datas.forEach(function(markerData) {
        console.log(markerData)
        var marker = new AMap.Marker({
          map: mapGaoDe,
          icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
          position: [markerData.position[0], markerData.position[1]],
          offset: new AMap.Pixel(-13, -30)
        });
        marker.setLabel({
          offset: new AMap.Pixel(20, 20),  //设置文本标注偏移量
          content: "<div class='info'>"+markerData.vin+"</div>", //设置文本标注内容
          direction: 'right' //设置文本标注方位
        });
        mapGaoDe.setCenter([markerData.position[0],markerData.position[1]]);
        markers.push(marker);
      });
    },
    removeMarkers(){
      mapGaoDe.remove(markers);
    },
    close(){
      clearInterval(this.timer);
      this.timer = null;
    },
    init(){
      console.log("初始化")
      this.timer = setInterval(this.continued, 1000);

    },
    continued(){
      getVehicleIndexData().then(response => {
        this.data = response.data;
        this.refreshMarkers();
      })
    }
  }
}
</script>

<style>
@import "https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css";
#container {
  width: 100%;
  height: 81vh;
}
#indexHead {
  width: 100%;
  height: 10vh;
}

.amap-icon img {
  width: 25px;
  height: 34px;
}
.box-card{
  margin: 0 15px;
}
.clearfix{
  font-size: 15px;
  font-weight: 900;
}
.info{
  position: relative;
  top: 0;
  right: 0;
  min-width: 0;
}
.amap-marker-label{
  border: 0;
  background-color: transparent;
}
</style>

